/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 * <p>
 * http://www.apache.org/licenses/LICENSE-2.0
 * <p>
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
.btn {
  cursor: pointer;
  
  &:not(.btn-light):not([class*="btn-outline-"]):not(.btn-link):not(.btn-default) {
    color: $white;
  }
}

.btn-light {
  background-color: $white;
  box-shadow: 0 2px 3px 0 rgba($black, 0.05);
  border-color: #efefef;
  color: #3e3f40;

  &:active,
  &:focus,
  &:hover {
    box-shadow: 0 2px 3px 0 rgba($black, 0.05);
  }

  &:hover {
    background-color: #f7f7f7;
    border-color: #e7e7e7;
  }

  &:active,
  &:focus {
    border-color: #e3e3e3;
    background-color: #f4f4f4;
  }
}

.btn--icon {
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  padding: 0;
  font-size: 1.2rem;
  text-align: center;
}

.btn--icon-text {
  & > .zmdi {
    font-size: 1.2rem;
    display: inline-block;
    vertical-align: top;
    margin: 1px 5px 0 0;
  }
}

.btn--action {
  z-index: 2;
  height: 50px;
  width: 50px;
  padding: 0;
  line-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 3px 7px rgba($black, 0.15);

  &,
  &:hover,
  &:focus {
    color: $white;

  }
}

.btn--fixed {
  position: fixed !important;
  bottom: 30px;
  right: 30px;
}

.btn-group-justified {
  display: flex;
  width: 100%;
  .btn,
  .btn-group {
    flex: 1;
    .btn {
      width: 100%;
    }
  }
}

[data-toggle="buttons"]:not(.btn-group--colors) {
  & > .btn {
    background-color: #ebebeb;
    color: $body-color;
    cursor: pointer;
    box-shadow: none !important;
    border: 0 !important;
    margin: 0;

    &.active {
      background-color: $light-blue;
      color: $white;
    }
  }
}

.btn-group--colors {
  & > .btn {
    box-shadow: none !important;
    border-radius: 50% !important;
    width: 30px;
    height: 30px;
    margin-right: 3px;
    margin-bottom: 3px;
    position: relative;

    &:before {
      @include font-icon('\f26b', 16px);
      @include transition(transform 200ms, opacity 200ms);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      line-height: 28px;
      padding-right: 3px;
      color: $white;
      font-style: italic;
      transform: scale(0);
      opacity: 0;
    }

    &.btn:not([class*="bg-"]) {
      border: 1px solid darken($input-border-color, 5%);

      &:before {
        color: $body-color;
      }
    }

    &.active {
      &:before {
        transform: scale(1);
        opacity: 1;
      }
    }
  }
}
.btn-icon {
	padding: 0;
	line-height: 2rem;
	width: 2rem;
	height: 2rem;
	border: 1px solid $border-color-default;
	cursor: pointer;

	&.btn-sm {
		line-height: 1.5rem;
		width: 1.5rem;
		height: 1.5rem;
	}
	
	&.btn-lg {
		line-height: 2.5rem;
		width: 2.5rem;
		height: 2.5rem;
	}
}
.btn-icon-other {
	padding: 0;
	font-size: 23px;
	// border: 1px solid $border-color-default;
	cursor: pointer;

	&.btn-sm {
		line-height: 1.5rem;
		width: 1.5rem;
		height: 1.5rem;
	}
	
	&.btn-lg {
		line-height: 2.5rem;
		width: 2.5rem;
		height: 2.5rem;
	}
}
.btn-icon-flip {
	position: relative;
	overflow: hidden;
	&,
	&:focus,
	&:active {
		outline: none;
		box-shadow: none;
	}

	i {
		border-radius: inherit;
		transition: top .25s;
		line-height: inherit;
		position: absolute;
		display: block;
		height: 100%;
		width: 100%;
		top: 0;
		&:last-child { top: 100%; }
	}

	&:hover i:first-child {
		top: -100%;
	}

	&:hover i:last-child {
		top: 0;
	}
}
